<!--
 @description  产品TOP排名分析
 @fileName TopReport.vue
 @author zengqiongying
 @created 2023/06/03 16:28:24
-->
<template>
  <div>
    <div class="dis-flex search-bar">
      <div class="activePageName"> 产品销量TOP20排名分析 </div>
      <div class="flex-full">
        <el-radio-group v-model="formData.categoryName">
          <el-radio
            v-for="item in categoryList"
            :key="item.dictName"
            :label="item.dictName"
          >{{ item.dictName }}</el-radio>
        </el-radio-group>

        <el-date-picker
          v-model="months"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="changeMonth"
        />
      </div>
      <div class="btns">
        <el-button :loading="isExporting" size="mini" type="primary" @click="handleExport">导出数据</el-button>

      </div>
    </div>
    <div class="inner-search-box">
      <el-form v-model="formData" inline label-width="80px">
        <el-form-item label="材质类型">
          <el-select v-model="formData.displayAreaName" clearable>
            <el-option
              v-for="(item,i) in displayAreaList"
              :key="i"
              :label="item.areaName"
              :value="item.areaName"
            />
            <!--:value="item.areaCode"-->
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.categoryName==='沙发'" label="规格">
          <el-select v-model="formData.styleName" clearable>
            <el-option
              v-for="(item,i) in displayStyleList"
              :key="i"
              :label="item.styleName"
              :value="item.styleName"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.displayAreaName" label="价格区间">
          <el-select v-model="formData.price" clearable>
            <el-option
              v-for="(item,i) in displayPriceList"
              :key="i"
              :label="item.showValue"
              :value="item.showValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.displayAreaName" label="尺寸区间">
          <el-select v-model="formData.productSize" clearable>
            <el-option
              v-for="(item,i) in displaySizeList"
              :key="i"
              :label="item.showValue"
              :value="item.showValue"
            />
          </el-select>
        </el-form-item>
      </el-form>

    </div>
    <table-box
      v-loading="isDataLoad"
      :data="tableData"
      :table-config="tableConfig"
      :border="true"
      :show-page="false"
    >
      <el-table-column fixed="left" label="排名" type="index" width="50" align="center" header-align="center" />
      <el-table-column
        prop="picture"
        label="产品图"
        width="130"
        header-align="center"
      >

        <template slot-scope="scope">
          <el-image
            class="proimg"
            :src="scope.row.pic"
            fit="contain"
            :preview-src-list="getPreviewSrcList(scope.row.pic)"
          />
          <!-- <img :src="scope.row.picture" style="width: 100px; height: 100px"> -->
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" min-width="180" />
      <el-table-column prop="marketTime" label="上市时间" min-width="80" />
      <el-table-column prop="price" label="价格区间" min-width="100" align="center" header-align="center" />
      <el-table-column prop="productSize" label="尺寸区间" min-width="100" align="center" header-align="center" />
      <el-table-column prop="styleName" label="规格分析" min-width="100" align="center" header-align="center" />
      <el-table-column prop="num" label="销量" min-width="100" align="center" header-align="center" />
      <el-table-column
        prop="echart"
        label="近6月销量趋势"
        min-width="340"
        header-align="center"
      >

        <template slot-scope="scope">
          <div class="echart">
            <ChartLine :x-axis-data="monthData" :chart-data="scope.row.chartData" />
            <div class="tooltip-box">
              <div v-for="item in scope.row.toolList" :key="item.value">
                <p>{{ item.mouth }}</p>
                <p>{{ item.value }}</p>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </table-box>
  </div>
</template>

<script>
import { queryTopReport, getBySuperCode, getSaleStyleName } from '@/api/display/recommendReport'
import { filterURL, parseTime } from '@/utils'
import ChartLine from './TopReportChartLine'
import SearchMixin from './mixins/Search'
import TableDataMixin from './mixins/TableData'

export default {
  name: 'TopReport',
  components: { ChartLine },
  mixins: [SearchMixin, TableDataMixin],
  data() {
    return {
      exportName: '销售排名',
      exportUrl: '/api/v1/displaySoftSaleNum/topReportExport',
      formData: {
        month: '',
        categoryName: '',
        displayAreaName: '',
        styleName: '',
        productSize: '',
        price: ''
      },
      noRequirdSearch: ['displayAreaName', 'styleName', 'productSize', 'price'],
      displayAreaList: [
        /* { areaName: '皮衣沙发专区' }, { areaName: '真皮沙发专区' }, { areaName: '优+功能沙发' } */
      ],
      displayStyleList: [
        { styleName: 'L型' }, { styleName: '一字型' }, { styleName: 'U型' }, { styleName: '组合型' }
      ],
      displayPriceList: [
        { showValue: '6000以下' }, { showValue: '6000-8000' }, { showValue: '8000-10000' }, { showValue: '10000以上' }
      ],
      displaySizeList: [
        { showValue: '3m以下' }, { showValue: '3.0m-3.4m' }, { showValue: '3.4m-3.8m' }, { showValue: '3.8m以上' }
      ],
      monthData: []
    }
  },
  computed: {
    selectedArea() {
      return this.displayAreaList.filter(v => v.areaName === this.formData.displayAreaName)
    }
  },
  watch: {
    'formData.categoryName'(val, oldVal) {
      this.formData.displayAreaName = ''
      this.formData.styleName = ''
      this.getSelectData()
    },
    'formData.displayAreaName'(val, oldVal) {
      this.formData.productSize = ''
      this.formData.price = ''
      this.getRangeData(val)
    }
  },
  async created() {
    this.displayStyleList = await getSaleStyleName()
  },
  methods: {
    async getSelectData() {
      if (this.formData.categoryName) {
        let code = ''
        this.categoryList.forEach(item => {
          if (item.dictName === this.formData.categoryName) {
            code = item.dictCode
          }
        })
        this.displayAreaList = await getBySuperCode(code)
      } else {
        this.displayAreaList = []
      }
    },
    async getRangeData(name) {
      const areaSelectList = this.displayAreaList.filter(item => item.areaName === name)[0] || {}
      this.displayPriceList = areaSelectList.priceList
      this.displaySizeList = areaSelectList.sizeList
    },
    async queryTableData() {
      const params = { ...this.formData }
      const lastMonth = this.formData.month.split(',').pop()
      const chartMonth = new Date(lastMonth)
      const axisData = []
      for (let i = 0; i < 6; i++) {
        const str = parseTime(chartMonth, '{y}-{m}')
        axisData.push(str)
        chartMonth.setMonth(chartMonth.getMonth() - 1)
      }
      this.monthData = axisData.reverse()
      await queryTopReport(params).then(res => {
        const data = res.data || []
        this.tableData = data.map(v => {
          const chartData = [
            v.beforeSix || 0,
            v.beforeFive || 0,
            v.beforeFour || 0,
            v.beforeThree || 0,
            v.beforeTwo || 0,
            v.beforeOne || 0
          ]
          const toolList = []
          this.monthData.forEach((m, mIndex) => {
            const str = {}
            chartData.forEach((c, cIndex) => {
              if (mIndex === cIndex) {
                str.mouth = m
                str.value = c
                toolList.push(str)
              }
            })
          })
          return {
            ...v, ...{ chartData }, ...{ toolList }
          }
        })
      })
    },
    getPreviewSrcList(pic) {
      if (pic) {
        const url = filterURL(pic)
        return [url]
      }
      return []
    }
  }
}

</script>
<style lang='scss' scoped>
  .inner-search-box{
    padding: 10px 0 5px;
    /deep/.el-form-item{
      margin-bottom: 5px;
    }
  }
  .proimg{
    display:block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin:  5px auto;
    border: 0;
  }
  .echart{
    height: 100px;
    position: relative;
  }
  .tooltip-box{
    position: relative;
    z-index: 9999;
    top:-65px;
    display: flex;
    justify-content: space-between;
    p{
      margin:0;
      text-align: center;
    }
  }
</style>
